<template>

	<view class="ts-column ts-padding">
		<view class="ts-row">

			<view class="ts-row ts-padding" style="flex:1;">
				<ts-button :borderRadius="30" type="success" :inverted="type!='丢失'" @click="switchType">丢失</ts-button>
			</view>
			<view class="ts-row ts-padding" style="flex:1;">
				<ts-button :borderRadius="30" type="success" :inverted="type==='丢失'" @click="switchType">捡到</ts-button>
			</view>
		</view>
		<view class="ts-row ts-padding">
		</view>

		<view class="ts-row">

			<view class="ts-row" style="flex:1;">
				我的名字
			</view>
			<view class="ts-row" style="flex:3;">
				<input type="text" v-model="linkman" placeholder="请填写您的姓名" />
			</view>
		</view>

		<view class="ts-row">

			<view class="ts-row" style="flex:1;">
				联系方式
			</view>
			<view class="ts-row" style="flex:3;">
				<input type="text" v-model="mobile" placeholder="请填写您的手机号码" />
			</view>
		</view>
		<view class="ts-row">

			<view class="ts-row" style="flex:1;">
				{{typeMessage}}物品
			</view>
			<view class="ts-row" style="flex:3;">
				<input type="text" v-model="title" placeholder="请填写丢失物品的名称" />
			</view>
		</view>
		<view class="ts-row">
			<view class="ts-row" style="flex:1;">
				{{typeMessage}}地点
			</view>
			<view class="ts-row" style="flex:3;">
				<input type="text" v-model="address" placeholder="请填写丢失物品的地点" />
			</view>
		</view>

		<view class="ts-column">
			<view class="ts-row" style="flex:1;">
				{{typeMessage}}物品简单描述
			</view>
			<view class="ts-row" style="flex:1;">
				<textarea v-model="description" style="height: 200upx; border: #3C3E49 solid 1upx; width: 100%; padding: 10upx;"
				 placeholder="请填写丢失物品的地点"> </textarea>
			</view>
		</view>

		<view class="ts-column">
			<view class="ts-row ts-flex-item ts-h6">
				上传{{typeMessage}}物品的图片，方便找回，最多上传3张图片。
			</view>
			<view class="ts-row ts-flex-item">
				<ts-image-uploader :count="3" @change="onChange"></ts-image-uploader>
			</view>
		</view>
		<view class="ts-column">
			<view class="ts-row ts-flex-item">
				<ts-button class="ts-row ts-flex-item" @tap="doPublish">发布</ts-button>
			</view>

		</view>
	</view>
</template>

<script>
	import tsImageUploader from "@/components/teaset/components/ts-image-uploader/ts-image-uploader.vue"
	import * as api from '@/common/api';
	import * as request from '@/common/request'

	export default {
		components: {
			tsImageUploader
		},
		data() {
			return {
				type: "丢失",
				title: "校园卡",
				address: '罗马广场',
				linkman: '张三',
				mobile: '18928779500',
				description: '校园卡，编号XXXXXXXX',
				files: [],
			}
		},
		methods: {
			switchType() {
				this.type = this.type == "丢失" ? "捡到" : "丢失";
			},
			onChange(files) {
				console.log(files)
				this.files = files;
			},

			async doPublish() {
				//上传图片
				let tmp_ids = new Set();
				for (let f of this.files) {
					let formdata = {};
					const res = await api.image.upload(f, formdata);
					if (res.errno === 0) {
						tmp_ids.add(res.data.id);
					}
				}
				const image_ids = Array.from(tmp_ids).join(',')
				console.log(image_ids);

				let data = {
					image_ids: image_ids,
					title: this.title,
					address: this.address,
					linkman: this.linkman,
					mobile: this.mobile,
					description: this.description,
					type: this.type,
					user_id: this.user_id
				}

				// console.log(data);				
				const res = await api.event.create(data);
				console.log(res);
			},

		},
		computed: {
			typeMessage() {
				return (this.type == "丢失" ? "丢失" : "捡到");
			}

		}
	}
</script>

<style>
	view {
		font-size: 32upx;
		line-height: 2.2em;
	}

	input {
		border-bottom: #C0C0C0 solid 1px;
		display: flex;
		flex: 3;
	}
</style>
